<!-- 12月柱状图 -->
<template>
  <div class="bar-chart-container">

    <div v-for="(value, index) in normalizedValues" :key="index"
      :style="{ backgroundColor: props.colors, height: `${value * 100}%`, margin: `auto ${props.gap / 2}px 0 ${props.gap / 2}px` }"
      class="bar">
      <el-popover :width="80" trigger="hover" :content="(index + 1) + '月：' + props.values[index] + props.unit"
        placement="bottom">
        <template #reference>
          <div class="popover-target" :style="{ minHeight: 20, height: `${100}%`, width: 20, }">
            <!-- 核心 bar 结构 -->
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  colors: {
    type: String,
    default: () => "#3a84ff",
  },
  values: {
    type: Array,
    required: true,
  },
  gap: {
    type: Number,
    default: () => 6,
  },
  unit: {
    type: String,
    default: () => "万元",
  }
});

const normalizedValues = computed(() => {
  const maxValue = Math.max(...props.values);
  if (maxValue === 0) {
    return props.values.map(() => 0);
  }
  return props.values.map(value => value / maxValue);
});
</script>

<style scoped>
.bar-chart-container {
  position: relative;
  display: flex;
  width: 100%;
}

.bar {
  flex: 1;
}
</style>
